<template>
  <div class="chat-container">
    <div class="messages" ref="messages">
      <div
        v-for="(msg, index) in messages"
        :key="index"
        :class="['message', msg.sender]"
      >
        <div class="message-avatar">
          <img :src="msg.avatar" class="avatar" />
        </div>
        <div class="text-container">
          <div class="text">{{ msg.content }}</div>
        </div>
      </div>
    </div>
    <div class="input-area">
      <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="输入消息..." />
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        { content: "你好！有啥我能帮忙的吗？", sender: "other", avatar: "/static/img/logo.png" }
      ],
      newMessage: "",
      userAvatar: "",
      botAvatar: "/static/img/logo.png"
    };
  },
  methods: {
    async sendMessage() {
      if (this.newMessage.trim() === "") return;
      this.userAvatar = uni.getStorage('userInfo').avatar;
      this.messages.push({ content: this.newMessage, sender: "user", avatar: this.userAvatar });
      
      let res = await this.$apis.AIAnswer(this.newMessage);
      console.log(res.data, 'res');
      this.newMessage = '';
      const cleanedMessage = this.extractLastMessage(res.data);
      
      this.messages.push({ content: "", sender: "other", avatar: this.botAvatar });
      this.typingEffect(cleanedMessage);
      this.scrollToTop();
    },
    extractLastMessage(data) {
      const parts = data.split('data:');
      return parts[parts.length - 1];
    },
    scrollToTop() {
      const messagesContainer = this.$refs.messages;
      if (messagesContainer) {
        messagesContainer.scrollTop = 0;
      }
    },
    typingEffect(message) {
      let index = 0;
      const interval = setInterval(() => {
        this.messages[this.messages.length - 1].content += message.charAt(index);
        index++;
        if (index === message.length) {
          clearInterval(interval);
        }
      }, 100);
    }
  },
  watch: {
    messages() {
      this.scrollToTop();
    }
  }
};
</script>

<style lang="scss" scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f5f5;

  .messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;

    .message {
      display: flex;
      align-items: flex-start; /* 修改为flex-start以便头像保持在顶部 */
      margin-bottom: 10px;

      &.user {
        justify-content: flex-end;

        .text {
          background: #9eea6a;
          color: #333;
          border-radius: 10px 0 10px 10px;
        }
      }

      &.other {
        justify-content: flex-start;

        .text {
          background: #fff;
          color: #333;
          border-radius: 0 10px 10px 10px;
        }
      }

      .message-avatar {
        margin-right: 10px; /* 为头像添加右间距 */
        position: relative;
      }

      .text-container {
        max-width: 60%;
        word-wrap: break-word;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      }

      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }

      .text {
        padding: 8px 12px;
      }
    }
  }

  .input-area {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ddd;
    background: #fff;

    input {
      flex: 1;
      padding: 8px;
      border: none;
      border-radius: 5px;
      outline: none;
    }

    button {
      margin-left: 10px;
      padding: 8px 15px;
      background: #4caf50;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  }
}
</style>
